<template>
  <div class="departments">
    <el-card>
      <el-row>
        <tree-tools :tree-node="company" :flag="true"></tree-tools>
      </el-row>
      <!-- 树形结构 -->
      <el-row>
        <el-tree :data="departs" default-expand-all :props="defaultProps">
          <tree-tools slot-scope="{ data }" :tree-node="data"></tree-tools>
        </el-tree>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import TreeTools from "../departments/components/tree-tools";
import {getTree} from '@/api/departments'
import {tranListToTreeData} from '@/utils/index'
export default {
  components: { TreeTools },
  data() {
    return {
      company: { name: "科技股份有限公司", manager: "负责人" },
      // data:[],
      departs:[],
      defaultProps: {
        children: "children",
        label: "name",
      },
    };
  },
  created() {
    this.getDepartments()
  },
  methods: {
    async getDepartments(){
      let {depts} = await getTree()
      this.data = tranListToTreeData(depts,'')
    }
  },
};
</script>

<style scoped>
.departments {
  padding: 30px;
  box-sizing: border-box;
}

.el-card {
  padding: 20px 100px;
  box-sizing: border-box;
}
</style>
